<!--
 * @Author: chad
 * @Date: 2021-10-26 09:02:48
 * @LastEditTime: 2021-11-18 10:38:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jshxpms-vue\src\views\flowable\formView\test.vue
-->
<template>
  <el-tabs v-model="activeName" class="container_box" type="card" @tab-click="handleClick">
    <el-tab-pane label="基础信息" name="first">
      <el-form
        ref="form"
        :model="form.variables"
        :rules="rules"
        label-width="150px"
        style="overflow: hidden;"
      >
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item class="title_class" label="基本信息">
              <el-divider></el-divider>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="项目经理" prop="username">
              <el-input v-model="formUserName" disabled placeholder="系统自动带入" style="width:100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请部门" prop="dept">
              <el-input v-model="formDeptName" disabled placeholder="请输入申请部门" style="width:100%;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="申请时间" prop="createTime">
              <el-date-picker
                v-model="form.variables.createTime"
                :picker-options="pickerOptions"
                align="right"
                disabled
                placeholder="选择申请时间"
                style="width:100%;"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="立项依据"  prop="lixiangrenzheng">
              <el-select
                v-model="form.variables.lixiangrenzheng"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择立项依据"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formProjectBasisList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="生产立项编号" prop="projectCode">
              <el-input v-model="form.variables.projectCode" disabled placeholder="系统自动生成" style="width:100%;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投标立项编号" prop="toubiaono" >
<!--              //v-on:click.native="chooseBidProject"-->
              <el-input v-model="form.variables.toubiaono" disabled placeholder="请选择投标立项" style="width:100%;">
                <el-button
                  slot="append"
                  icon="el-icon-third-guide"

                ></el-button>
<!--                @click="chooseBidProject"-->
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="跟踪立项编号" prop="yxnum" >
<!--              //v-on:click.native="chooseTrackProject"-->
              <el-input v-model="form.variables.yxnum" disabled placeholder="请选择跟踪立项" style="width:100%;">
                <el-button
                  slot="append"
                  icon="el-icon-third-guide"

                ></el-button>
<!--                @click="chooseTrackProject"-->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>

        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item class="title_class" label="项目概况">
              <el-divider></el-divider>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="form.variables.projectName"
                :disabled="!isformdisabled"
                placeholder="请输入项目名称"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="projectType1">
              <el-select
                v-model="form.variables.projectType1"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择项目类型"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formProjectTypeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="建设单位" prop="construction">
              <el-input
                v-model="form.variables.construction"
                :disabled="!isformdisabled"
                placeholder="请输入建设单位"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同金额（元）" prop="projectAmount">
              <template>
                <el-input-number
                  v-model="form.variables.projectAmount"
                  :disabled="!isformdisabled"
                  :max="9999999999.99"
                  :min="0"
                  :precision="2"
                  :step="1"
                  placeholder="请输入合同金额"
                  style="width:100%;"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="履约保证金（元）" prop="lvyuebaozhengjin">
              <template>
                <el-input-number
                  v-model="form.variables.lvyuebaozhengjin"
                  :disabled="!isformdisabled"
                  :max="9999999999.99"
                  :min="0"
                  :precision="2"
                  :step="1"
                  placeholder="请输入履约保证金"
                  style="width:100%;"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票税点" prop="shuidian">
              <el-select
                v-model="form.variables.shuidian"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择开票税点"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formTaxPointList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="isShowTaxExplain" :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="开票税点说明" prop="kaipiaoshuoming">
              <el-input
                v-model="form.variables.kaipiaoshuoming"
                :disabled="!isformdisabled"
                :rows="2"
                placeholder="请输入备注"
                style="width:100%;"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="工程工期（天）" prop="gongchenggongqi">
              <template>
                <el-input-number
                  v-model="form.variables.gongchenggongqi"
                  :disabled="!isformdisabled"
                  :max="50"
                  :min="0"
                  :step="1"
                  placeholder="请输入工程工期"
                  step-strictly
                  style="width:100%;"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划开工时间" prop="planStarttime">
              <el-date-picker
                v-model="form.variables.planStarttime"
                :disabled="!isformdisabled"
                :picker-options="pickerOptions"
                align="right"
                placeholder="选择计划开工时间"
                style="width:100%;"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="项目地点" prop="shi">
              <el-cascader
                v-model="siteShiArr"
                :disabled="!isformdisabled"
                :options="formRegionList"
                :props="{ checkStrictly: true }"
                clearable
                placeholder="请选择项目地点"
                style="width:100%;"
                @change="handleRegionChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质保年限（年）" prop="zhibaonianxian">
              <template>
                <el-input-number
                  v-model="form.variables.zhibaonianxian"
                  :disabled="!isformdisabled"
                  :max="999"
                  :min="0"
                  :step="1"
                  placeholder="请输入质保年限"
                  step-strictly
                  style="width:100%;"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="营销人员" prop="yingxiaorenyuan">
              <el-input
                v-model="traininguserName"
                :disabled="!isformdisabled"
                placeholder="请选择营销人员"
                style="width:100%;"
                @focus="dialogName = 'participantsDialog'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="备注" prop="memo">
              <el-input
                v-model="form.variables.memo"
                :disabled="!isformdisabled"
                :rows="2"
                placeholder="请输入备注"
                style="width:100%;"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="附件" prop="fileProject">
              <el-upload
                :before-upload="checkMyFileSize"
                :action="uploadUrl"
                :data="fileProjectParam"
                :disabled="!isformdisabled"
                :file-list="fileProjectList"
                :headers="uploadHeaders"
                :on-preview="downloadFile"
                :on-remove="handleRemoveForProject"
                :on-success="handleAvatarSuccessForProject"
                class="upload-demo"
                multiple
                style="width:100%;"
              >
                <el-button v-if="isformdisabled" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item class="title_class" label="成本预算">
              <el-divider></el-divider>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="材料费（元）" prop="cailiaofei">
              <template>
                <el-input-number
                  v-model="form.variables.cailiaofei"
                  :disabled="!isformdisabled"
                  :max="9999999999.99"
                  :min="0"
                  :precision="2"
                  :step="1"
                  placeholder="请输入材料费"
                  style="width:100%;"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工费（元）" prop="shigongfei">
              <template>
                <el-input-number
                  v-model="form.variables.shigongfei"
                  :disabled="!isformdisabled"
                  :max="9999999999.99"
                  :min="0"
                  :precision="2"
                  :step="1"
                  placeholder="请输入施工费"
                  style="width:100%;"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="协调费上限（元）" prop="guanlifei">
              <el-input
                v-model="computeCoordinationCost"
                :disabled="!isformdisabled"
                disabled
                placeholder="系统自动计算"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他费用（元）" prop="othercost">
              <template>
                <el-input-number
                  v-model="form.variables.othercost"
                  :disabled="!isformdisabled"
                  :max="9999999999.99"
                  :min="0"
                  :precision="2"
                  :step="1"
                  placeholder="请输入其他费用"
                  style="width:100%;"
                ></el-input-number>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="其他费用说明" prop="fukuanfangshi">
              <el-input
                v-model="form.variables.fukuanfangshi"
                :disabled="!isformdisabled"
                :rows="2"
                placeholder="请输入其他费用说明"
                style="width:100%;"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="项目成本（元）" prop="zongchengben">
              <el-input
                v-model="computeTotalCost"
                :disabled="!isformdisabled"
                disabled
                placeholder="系统自动计算"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="材料费明细" prop="fileMaterialCost">
              <el-upload
                :before-upload="checkMyFileSize"
                :action="uploadUrl"
                :data="fileMaterialCostParam"
                :disabled="!isformdisabled"
                :file-list="fileMaterialCostList"
                :headers="uploadHeaders"
                :on-preview="downloadFile"
                :on-remove="handleRemoveForMaterialCost"
                :on-success="handleAvatarSuccessForMaterialCost"
                class="upload-demo"
                multiple
                style="width:100%;"
              >
                <el-button v-if="isformdisabled" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="施工费明细" prop="fileConstructionCost">
              <el-upload
                :before-upload="checkMyFileSize"
                :action="uploadUrl"
                :data="fileConstructionCostParam"
                :disabled="!isformdisabled"
                :file-list="fileConstructionCostList"
                :headers="uploadHeaders"
                :on-preview="downloadFile"
                :on-remove="handleRemoveForConstructionCost"
                :on-success="handleAvatarSuccessForConstructionCost"
                class="upload-demo"
                multiple
                style="width:100%;"
              >
                <el-button v-if="isformdisabled" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="备注" prop="chengbenbeizhu">
              <el-input
                v-model="form.variables.chengbenbeizhu"
                :disabled="!isformdisabled"
                :rows="2"
                placeholder="请输入备注"
                style="width:100%;"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="附件" prop="fileCost">
              <el-upload
                :before-upload="checkMyFileSize"
                :action="uploadUrl"
                :data="fileCostParam"
                :disabled="!isformdisabled"
                :file-list="fileCostList"
                :headers="uploadHeaders"
                :on-preview="downloadFile"
                :on-remove="handleRemoveForCost"
                :on-success="handleAvatarSuccessForCost"
                class="upload-demo"
                multiple
                style="width:100%;"
              >
                <el-button v-if="isformdisabled" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item class="title_class" label="项目毛利润">
              <el-divider></el-divider>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="毛利润（元）" prop="profit">
              <el-input
                v-model="computeGrossProfit"
                :disabled="!isformdisabled"
                disabled
                placeholder="系统自动计算"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毛利润率(%)" prop="estimatedProfitMargin">
              <el-input
                v-model="computeGrossMargin"
                :disabled="!isformdisabled"
                disabled
                placeholder="系统自动计算"
                style="width:100%;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="备注" prop="lirunbeizhu">
              <el-input
                v-model="form.variables.lirunbeizhu"
                :disabled="!isformdisabled"
                :rows="2"
                placeholder="请输入备注"
                style="width:100%;"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="附件" prop="fileProfit">
              <el-upload
                :before-upload="checkMyFileSize"
                :action="uploadUrl"
                :data="fileProfitParam"
                :disabled="!isformdisabled"
                :file-list="fileProfitList"
                :headers="uploadHeaders"
                :on-preview="downloadFile"
                :on-remove="handleRemoveForProfit"
                :on-success="handleAvatarSuccessForProfit"
                class="upload-demo"
                multiple
                style="width:100%;"
              >
                <el-button v-if="isformdisabled" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item class="title_class" label="风险评估">
              <el-divider></el-divider>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="投资方信誉" prop="xinyu">
              <el-select
                v-model="form.variables.xinyu"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择投资方信誉"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formCreditList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交付能力评估" prop="jiaofunenglipinggu">
              <el-select
                v-model="form.variables.jiaofunenglipinggu"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择交付能力评估"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formPayList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="12">
            <el-form-item label="技术支撑评估" prop="zhichengpinggu">
              <el-select
                v-model="form.variables.zhichengpinggu"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择技术支撑评估"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formTechList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资金垫付情况" prop="zijindianfushuoming">
              <el-select
                v-model="form.variables.zijindianfushuoming"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择资金垫付情况"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formFundAdvanceList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="付款方式说明" prop="fukuantype">
              <el-input
                v-model="form.variables.fukuantype"
                :disabled="!isformdisabled"
                :rows="2"
                placeholder="请输入付款方式说明"
                style="width:100%;"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="资金来源说明" prop="zijinlaiyuanshuoming">
              <el-select
                v-model="form.variables.zijinlaiyuanshuoming"
                :disabled="!isformdisabled"
                clearable
                placeholder="请选择资金来源说明"
                style="width:100%;"
              >
                <el-option
                  v-for="item in formFundSourceList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <el-form-item label="备注" prop="pinggubeizhu">
              <el-input
                v-model="form.variables.pinggubeizhu"
                :disabled="!isformdisabled"
                :rows="2"
                placeholder="请输入备注"
                style="width:100%;"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 弹窗 -->
        <el-row v-if="isChooseTrackProject" :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <TrackProjectPopup req-url="/system/trackproject/list" @transferTrackProjectData="getTrackProject"/>
          </el-col>
        </el-row>
        <!-- 弹窗 -->
        <el-row v-if="isChooseBidProject" :gutter="4" style="padding:0 10px;">
          <el-col :span="24">
            <BidProjectPopup req-url="/system/bidproject/list" @choosedProect="getBidProject"/>
          </el-col>
        </el-row>

        <!--     弹窗-->
        <singleCascader
          v-if="dialogName === 'participantsDialog'"
          :list="treeselectData"
          @close="finishParticipants"
        />
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="项目看板" name="second" class="beijing">
      <div class="zhibiao_box">
        <div class="top_title">项目概况</div>
        <div class="top">
          <div class="a">
            <div class="a_top border_btom">
              <div>
                <div class="text_x">项目阶段</div>
                <div class="text_b">生产阶段</div>
              </div>
              <div>
                <img src="../../../../assets/images/项目阶段.png">
              </div>
            </div>
            <div class="a_top">
              <div>
                <div class="text_t">项目金额</div>
                <div class="text_b "><span class="shuzi">{{info.projectMoney*1}} </span>(元)</div>
              </div>
              <div>
                <img src="../../../../assets/images/项目金额.png">
              </div>
            </div>
          </div>
          <div class="b">
            <div class="left">
              <div>
                <div class="fonts">开票金额</div>
                <div class="font-wt"><span class="shuzi">{{ info.kaipiaoMoney*1}} </span>(元)</div>
                <div class="small">占比:{{info.kaipiaoPer*1}}%</div>
              </div>
              <div>
                <div class="fonts">未开票金额</div>
                <div class="fonts"><span class="colors">{{info.notKaipiaoMoney*1}}</span>元 <span class="zhanbi">占比{{info.kaipiaoPer*1>100?'0':(100-info.kaipiaoPer*1)}}%</span></div>
              </div>
            </div>
            <div class="right">
              <el-progress :percentage="info.kaipiaoPer*1||0" :show-text="false" color="#f18e23" type="circle">
              </el-progress>
              <div class="jindu">
                <div>{{info.kaipiaoPer*1}}%</div>
                <div>开票进度</div>
              </div>
            </div>
          </div>
          <div class="b">
            <div class="left">
              <div>
                <div class="fonts">回笼金额</div>
                <div class="font-wt"><span class="shuzi">{{info.huilongMoney*1}} </span> (万元)</div>
                <div class="smalls">占比:{{info.huilongPer*1}}%</div>
              </div>
              <div>
                <div class="fonts">未回笼金额</div>
                <div class="fonts"><span class="colors">{{info.notHuilongMoney*1}}</span>万元 <span class="zhanbi">占比{{info.huilongPer*1>100?'0':(100-info.huilongPer*1)}}%</span></div>
              </div>
            </div>
            <div class="right">
              <el-progress :percentage="info.huilongPer*1||0" :show-text="false" color="#2fa4f3" type="circle"> </el-progress>
              <div class="jindu">
                <div>{{info.huilongPer*1}}%</div>
                <div>回笼进度</div>
              </div>
            </div>
          </div>

        </div>
        <div class="box_middle">
          <div class="box_middle_title">项目成本</div>
          <div class="box_middle_list">当前总成本 (元)：
            <el-progress :text-inside="false" :stroke-width="18" :percentage="info.projectPer*1||0"  class="bigjindu"></el-progress>
            <span class="list_text">{{info.projectCost*1}}元 / (成本预算：{{ info.projectBudget*1}}元)</span>
          </div>
        </div>
        <div class="box_bottom">
          <div class="bottom_list">
            <div class="bottom_list_title">营销成本</div>
            <div class="bottom_list_zj">总计：
              <el-progress :text-inside="false" :stroke-width="18" :percentage="info.trackPer*1||0" class="bigjindu"></el-progress>
              <span>{{info.trackCost*1}}元</span>
            </div>
            <p>项目推进：<span class="fontc">{{info.trackPromotionCost*1}}元</span></p>
            <p>借款报销：<span class="fontc">{{info.trackLoanCost*1}}元</span></p>
            <p>其他费用：<span class="fontc">{{info.trackOtherCost*1}}元</span></p>
          </div>
          <div class="bottom_list">
            <div class="bottom_list_title">投标成本</div>
            <div class="bottom_list_zj">总计：
              <el-progress :text-inside="false" :stroke-width="18" :percentage="info.bidPer*1||0" class="bigjindu"></el-progress>
              <span>{{info.bidCost*1}}元</span>
            </div>
            <p>标书费：<span class="fontc">{{info.bidDocCost*1}}元</span></p>
            <p>陪标费：<span class="fontc">{{info.bidAccompanyCost*1}}元</span></p>
            <p>专家费：<span class="fontc">{{info.bidExpertCost*1}}元</span></p>
            <p>其他费用：<span class="fontc">{{info.bidOtherCost*1}}元</span></p>
          </div>

          <div class="bottom_list">
            <div class="bottom_list_title">生产成本</div>
            <div class="bottom_list_zj">总计：
              <el-progress :text-inside="false" :stroke-width="18" :percentage="info.productionPer*1||0" class="bigjindu"></el-progress>
              <span>{{info.productionCost*1}}元</span>
            </div>
            <p>材料采购：<span class="fontc">{{info.productionMaterialCost*1}}元</span></p>
            <p>服务采购：<span class="fontc">{{info.productionServiceCost*1}}元</span></p>
            <p>项目推进：<span class="fontc">{{info.productionPromotionCost*1}}元</span></p>
            <p>借款报销：<span class="fontc">{{info.productionLoanCost*1}}元</span></p>
            <p>其他费用：<span class="fontc">{{info.productionOtherCost*1}}元</span></p>
          </div>
        </div>
  <!--    货物采购清单    -->

        <div class="goodslist">
          <div class="daochu">
            <div class="goods_title">货物采购清单</div>
            <el-button size="small" type="primary" @click="export2Excel('cgtable')">导出数据</el-button>
          </div>
          <div>
                <el-table
                  :data="info.materialList"
                  id="cgtable"
                  ref="cgtable"
                  border

                >
                  <el-table-column align="center" label="建议供应商" prop="name">
                  </el-table-column>
                  <el-table-column align="center" label="材料名称" prop="qicainame">
                  </el-table-column>
                  <el-table-column align="center" label="品牌:规格型号" prop="leixing">
                  </el-table-column>
                  <el-table-column align="center" label="单位" prop="danwei">
                  </el-table-column>
                  <el-table-column align="center" label="数量" prop="shuliang">
                  </el-table-column>
                  <el-table-column align="center" label="参考单价1" prop="cankaodanjia1">
                  </el-table-column>
                  <el-table-column align="center" label="参考单价2" prop="cankaodanjia2">
                  </el-table-column>
                  <el-table-column align="center" label="参考单价3" prop="cankaodanjia3">
                  </el-table-column>
                  <el-table-column align="center" label="建议单价" prop="jianyidanjia">
                  </el-table-column>
                  <el-table-column align="center" label="建议总价" prop="shijiacaigoujia">
                  </el-table-column>

                </el-table>


          </div>
        </div>
<!--    服务采购清单    -->
        <div class="goodslist">
          <div class="daochu">
            <div class="goods_title">服务采购清单</div>
            <el-button size="small" type="primary" @click="export2Excel('fwtable')">导出数据</el-button>
          </div>
          <div>

                <el-table
                  :data="info.serviceList"
                  id="fwtable"
                  ref="fwtable"
                  border
                >
                  <el-table-column align="center" label="施工队名称" prop="name">
                  </el-table-column>
                  <el-table-column align="center" label="施工队负责人" prop="fuzeren">
                  </el-table-column>
                  <el-table-column align="center" label="承诺工期(天)" prop="gongzuoliang">
                  </el-table-column>
                  <el-table-column align="center" label="施工总价(含税)" prop="danjia">
                  </el-table-column>

                </el-table>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import {save,getInfo} from '../../../../api/biz/productionProject'
import {definitionStart,getFormDetail} from '../../../../api/flowable/definition'
import {complete} from '../../../../api/flowable/process'
import {getFileDetail} from '../../../../api/system/file'
import {formatDate} from '../../../../utils'
import {treeselect} from '../../../../api/system/dept'
import TrackProjectPopup from '../../../../components/Popup/TrackProjectPopup'
import BidProjectPopup from '../../../../components/Popup/BidProjectPopup'
import singleCascader from '../../../../components/Process/components/nodePanel/property/singleCascader'
import {listDeptExcludeChild} from "../../../../api/system/productionproject";







export default {
  components: {TrackProjectPopup, BidProjectPopup, singleCascader},
  props: {
    proData: {
      type: String,
      default: () => {
        return ''
      },
    },
    local_val: {
      type: Object,
      default: {}
    },
    isformdisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    var validatePlanStratTime = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请选择计划开工时间'));
      } else {
        var createTime = this.form.variables.createTime;
        if (new Date(createTime) > new Date(value)) {
          callback(new Error('计划开工时间不能小于立项时间'));
        } else {
          callback();
        }

      }
    };
    return {
      //看板总数据
      info:{},
      //货物采购清单数据
      cgtableData:[{billnum:'admin',billjine:'4000'},],
      //服务采购清单数据
      fwtableData:[{},{},{}],
      //页签
      activeName: 'first',
      isShowTaxExplain: false,
      treeselectData: [],
      traininguserName: '',
      dialogName: '',
      isChooseTrackProject: false,
      isChooseBidProject: false,
      siteShiArr: [],
      fileProjectIds: '',
      fileProjectList: [],
      fileProjectParam: {
        fieldName: 'project',
        tableName: 'pms_production_project',
      },
      fileMaterialCostIds: '',
      fileMaterialCostList: [],
      fileMaterialCostParam: {
        fieldName: 'materialCost',
        tableName: 'pms_production_project',
      },
      fileConstructionCostIds: '',
      fileConstructionCostList: [],
      fileConstructionCostParam: {
        fieldName: 'constructionCost',
        tableName: 'pms_production_project',
      },
      fileCostIds: '',
      fileCostList: [],
      fileCostParam: {
        fieldName: 'cost',
        tableName: 'pms_production_project',
      },
      fileProfitIds: '',
      fileProfitList: [],
      fileProfitParam: {
        fieldName: 'profit',
        tableName: 'pms_production_project',
      },
      fileFromData: {
        id: null,
        tableName: 'pms_production_project',
      },
      formUserName: '',
      formDeptName: '',
      form: {
        variables: {
          fujian: '',
          cailiaofei: 0,
          shigongfei: 0,
          guanlifei: 0,
          othercost: 0,
          zongchengben: 0,
          projectAmount: 0,
          profit: 0,
        },
        // 必传值
        formTableName: '',
        formType: '',
        id: 0,
        formId: 0,
      },
      isUpdate: false,
      completeData: {
        comment: '退回重新审批',
        defaultTaskShow: true,
        delegateTaskShow: false,
        deployId: null,
        instanceId: '',
        multiple: false,
        procInsId: '',
        returnTaskShow: false,
        sendUserShow: true,
        targetKey: '',
        taskId: '',
        values: {},
        vars: '',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
      },
      formProjectBasisList: [],
      formPayList: [],
      formProjectTypeList: [],
      formFundAdvanceList: [],
      formFundSourceList: [],
      formCreditList: [],
      formTechList: [],
      formRegionList: [],
      formTaxPointList: [],
      usersList: [],
      uploadHeaders: {
        Authorization: '',
      },
      uploadUrl: process.env.VUE_APP_BASE_API + '/common/batchUpload',
      rules: {
        lixiangrenzheng: [
          {required: true, message: '请选择立项依据', trigger: 'blur'},
        ],
        projectName: [
          {required: true, message: '请输入项目名称', trigger: 'blur'},
        ],
        projectType1: [
          {required: true, message: '请选择项目类型', trigger: 'blur'},
        ],
        construction: [
          {required: true, message: '请输入建设单位', trigger: 'blur'},
        ],
        projectAmount: [
          {required: true, message: '请输入合同金额', trigger: 'blur'},
        ],
        lvyuebaozhengjin: [
          {required: true, message: '请输入履约保证金', trigger: 'blur'},
        ],
        shuidian: [
          {required: true, message: '请选择开票税点', trigger: 'blur'},
        ],
        gongchenggongqi: [
          {required: true, message: '请输入工程工期', trigger: 'blur'},
        ],
        planStarttime: [
          {required: true, message: '请选择计划开工时间', trigger: 'blur'},
          {validator: validatePlanStratTime, trigger: 'blur'}
        ],
        shi: [
          {required: true, message: '请选择项目地点', trigger: 'blur'},
        ],
        zhibaonianxian: [
          {required: true, message: '请输入质保年限', trigger: 'blur'},
        ],
        yingxiaorenyuan: [
          {required: true, message: '请选择营销人员', trigger: 'change'},
        ],
        cailiaofei: [
          {required: true, message: '请输入材料费', trigger: 'blur'},
        ],
        shigongfei: [
          {required: true, message: '请输入施工费', trigger: 'blur'},
        ],
        othercost: [
          {required: true, message: '请输入其他费用', trigger: 'blur'},
        ],
        fukuanfangshi: [
          {required: true, message: '请输入其他费用说明', trigger: 'blur'},
        ],
        fileMaterialCost: [
          {required: true, message: '请上传材料费明细', trigger: 'change'},
        ],
        fileConstructionCost: [
          {required: true, message: '请上传施工费明细', trigger: 'change'},
        ],
        xinyu: [
          {required: true, message: '请选择投资方信誉', trigger: 'blur'},
        ],
        jiaofunenglipinggu: [
          {required: true, message: '请选择交付能力评估', trigger: 'blur'},
        ],
        zhichengpinggu: [
          {required: true, message: '请选择技术支撑评估', trigger: 'blur'},
        ],
        zijindianfushuoming: [
          {required: true, message: '请选择资金垫付情况', trigger: 'blur'},
        ],
        fukuantype: [
          {required: true, message: '请输入付款方式说明', trigger: 'blur'},
        ],
        zijinlaiyuanshuoming: [
          {required: true, message: '请选择资金来源说明', trigger: 'blur'},
        ],
      },
    }

  },
  created() {
    // 立项依据
    this.getDicts('project_basis').then((res) => {
      this.formProjectBasisList = res.data
    })
    // 项目类型
    this.getDicts('project_type').then((res) => {
      this.formProjectTypeList = res.data
    })
    // 税点
    this.getDicts('tax_point').then((res) => {
      this.formTaxPointList = res.data
    })
    // 项目地点
    this.getRegionTree().then((res) => {
      this.formRegionList = res.data
    })
    // 投资方信誉
    this.getDicts('investor_reputation').then((res) => {
      this.formCreditList = res.data
    })
    // 交付能力评估
    this.getDicts('pay_capability').then((res) => {
      this.formPayList = res.data
    })
    // 技术支撑评估
    this.getDicts('tech_assessment').then((res) => {
      this.formTechList = res.data
    })
    // 资金垫付情况
    this.getDicts('fund_advance').then((res) => {
      this.formFundAdvanceList = res.data
    })
    // 资金来源说明
    this.getDicts('fund_source').then((res) => {
      this.formFundSourceList = res.data
    })

    // const id = localStorage.getItem('id')
    const id = this.local_val.id
    if (id) {
      this.form.id = id
    }

    // this.form.formId = localStorage.getItem('formId')
    this.form.formId = this.local_val.formId
    this.gettreeselect()


  //  看板拿数据
    this.loaddatalist()
  //  页面数据
    this.loadFromDataList()
  },
  methods: {
    //进度条数值处理
    format(percentage) {
      return percentage === 100 ? '100' : `${percentage}%`;
    },
    // 看板拿数据
    async loaddatalist(){
      let {data} = await listDeptExcludeChild(this.$route.query.projectCode)
      this.info = data
    },
    async loadFromDataList(){
      this.fileFromData.id = this.$route.query.id
      let {data} = await getFormDetail(this.fileFromData)
      this.form.variables = data
      this.siteShiArr = this.form.variables.shi.split(',')
      this.getUserAll().then((res) => {
        this.traininguserName = this.selectUserNameByUserId(res, this.form.variables.yingxiaorenyuan)
      })
      // 请求附件详情
      this.getFileDetail(this.form.variables.fujian)
      this.formUserName = this.form.variables.createUserName
      this.formDeptName = this.form.variables.createDeptName

    },
    //   点击按钮  导出excel表格：
    export2Excel: function(config) {
      let tables = document.getElementById(config);
      let table_book = this.$XLSX.utils.table_to_book(tables);
      var table_write = this.$XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: "application/octet-stream" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, table_write);
      }
      return table_write;
    },
    //页签切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    gettreeselect() {
      treeselect().then((res) => {
        this.treeselectData = res.data.map((item) => {
          item.value = item.id
          return item
        })
      })
    },
    finishParticipants(check) {
      this.dialogName = ''
      this.form.variables.yingxiaorenyuan = check.userId
      this.traininguserName = check.nickName
    },
    chooseTrackProject() {
      this.isChooseTrackProject = true
    },
    getTrackProject(row) {
      if (row) {
        this.form.variables.yxnum = row.numbers
      }
      this.isChooseTrackProject = false
    },
    chooseBidProject() {
      this.isChooseBidProject = true
    },
    getBidProject(row) {
      if (row) {
        this.form.variables.toubiaono = row.num
      }
      this.isChooseBidProject = false
    },
    handleRegionChange(value) {
      this.form.variables.shi = this.siteShiArr.join(',')
    },
    downloadFile({url}) {
      window.open(url)
    },
    handleAvatarSuccessForMaterialCost({data}, file, fileList) {
      this.fileMaterialCostIds = this.fileMaterialCostIds == null ? '' : this.fileMaterialCostIds
 this.fileMaterialCostIds += `;${data[0].fileId}`
      this.rules.fileMaterialCost = []
      this.$refs.form.clearValidate('fileMaterialCost')
    },
    handleAvatarSuccessForConstructionCost({data}, file, fileList) {
      this.fileConstructionCostIds = this.fileConstructionCostIds == null ? '' : this.fileConstructionCostIds
 this.fileConstructionCostIds += `;${data[0].fileId}`
      this.rules.fileConstructionCost = []
      this.$refs.form.clearValidate('fileConstructionCost')
    },
    handleAvatarSuccessForProject({data}, file, fileList) {
      this.fileProjectIds = this.fileProjectIds == null ? '' : this.fileProjectIds
 this.fileProjectIds += `;${data[0].fileId}`
    },
    handleAvatarSuccessForCost({data}, file, fileList) {
      this.fileCostIds = this.fileCostIds == null ? '' : this.fileCostIds
 this.fileCostIds += `;${data[0].fileId}`
    },
    handleAvatarSuccessForProfit({data}, file, fileList) {
      this.fileProfitIds = this.fileProfitIds == null ? '' : this.fileProfitIds
 this.fileProfitIds += `;${data[0].fileId}`
    },
    onSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          // const procInsId = localStorage.getItem('procInsId')
          let procInsId = this.local_val.procInsId
          this.form.variables.fujian =
            this.fileProjectIds +
            this.fileMaterialCostIds +
            this.fileConstructionCostIds +
            this.fileCostIds +
            this.fileProfitIds
          if (procInsId != '' && typeof (procInsId) != 'undefined' && procInsId != 'undefined') {
            this.completeData.instanceId = procInsId
            this.completeData.procInsId = procInsId
            // const taskId = localStorage.getItem('taskId')
            const taskId = this.local_val.taskId
            if (taskId) {
              this.completeData.taskId = taskId
            }
            console.log('审批更新逻辑', this.form)
            const updateSealmsg = await save({
              id: this.form.id,
              ...this.form.variables,
            })
            if (updateSealmsg.code == 200) {
              const completemsg = await complete(this.completeData)
              if (completemsg.code == 200) {
                this.msgSuccess(completemsg.msg)
                this.goBack()
              }
            }
          } else {
            // this.form.formTableName = localStorage.getItem('formTableName')
            // this.form.formType = localStorage.getItem('formType')
            // let procDefId = localStorage.getItem('procDefId')

            this.form.formTableName = this.local_val.formTableName
            this.form.formType = this.local_val.formType
            let procDefId = this.local_val.procDefId

            console.log('submit!', this.form)
            const {code, data} = await save({
              ...this.form.variables,
            })
            if (code == 200) {
              this.form.id = data
              const {code, msg} = await definitionStart(procDefId, this.form)
              if (code == 200) {
                this.msgSuccess(msg)
                this.goBack()
              }
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    goBack() {
      // 关闭当前标签页并返回上个页面
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      localStorage.setItem("needLoadList","yes")
    },
    async getFileDetail(id) {
      const {code, data, msg} = await getFileDetail(id)
      if (code == 200) {
        data.map((item) => {
          if (item.fieldName == 'project') {
            this.fileProjectList.push({
              name: item.fileName,
              url: item.savePath,
              id: item.id,
            })
          } else if (item.fieldName == 'materialCost') {
            this.fileMaterialCostList.push({
              name: item.fileName,
              url: item.savePath,
              id: item.id,
            })
          } else if (item.fieldName == 'constructionCost') {
            this.fileConstructionCostList.push({
              name: item.fileName,
              url: item.savePath,
              id: item.id,
            })
          } else if (item.fieldName == 'cost') {
            this.fileCostList.push({
              name: item.fileName,
              url: item.savePath,
              id: item.id,
            })
          } else if (item.fieldName == 'profit') {
            this.fileProfitList.push({
              name: item.fileName,
              url: item.savePath,
              id: item.id,
            })
          }
        })
      }
    },
    handleRemoveForMaterialCost(file, fileList) {
      let idArr
      if (this.form.variables.id) {
        idArr = fileList.map((item) => item.id)
      } else {
        idArr = fileList.map((item) => item.response.data[0].fileId)
      }
      this.fileMaterialCostIds = idArr.join(';')
      if (idArr.length == 0) {
        this.rules.fileMaterialCost = [
          {required: true, message: '请上传材料费明细', trigger: 'change'},
        ]
      }
    },
    handleRemoveForConstructionCost(file, fileList) {
      let idArr
      if (this.form.variables.id) {
        idArr = fileList.map((item) => item.id)
      } else {
        idArr = fileList.map((item) => item.response.data[0].fileId)
      }
      this.fileConstructionCostIds = idArr.join(';')
      if (idArr.length == 0) {
        this.rules.fileConstructionCost = [
          {required: true, message: '请上传施工费明细', trigger: 'change'},
        ]
      }
    },
    handleRemoveForProject(file, fileList) {
      let idArr
      if (this.form.variables.id) {
        idArr = fileList.map((item) => item.id)
      } else {
        idArr = fileList.map((item) => item.response.data[0].fileId)
      }
      this.fileProjectIds = idArr.join(';')
    },
    handleRemoveForCost(file, fileList) {
      let idArr
      if (this.form.variables.id) {
        idArr = fileList.map((item) => item.id)
      } else {
        idArr = fileList.map((item) => item.response.data[0].fileId)
      }
      this.fileCostIds = idArr.join(';')
    },
    handleRemoveForProfit(file, fileList) {
      let idArr
      if (this.form.variables.id) {
        idArr = fileList.map((item) => item.id)
      } else {
        idArr = fileList.map((item) => item.response.data[0].fileId)
      }
      this.fileProfitIds = idArr.join(';')
    },
  },
  watch: {
    proData: {
      handler(val) {
        this.uploadHeaders.Authorization = 'Bearer ' + this.$store.getters.token
        if (val) {
          let dataArr = JSON.parse(val)
          this.form.variables = {
            ...dataArr[0],
          }
          this.siteShiArr = this.form.variables.shi.split(',')
          this.getUserAll().then((res) => {
            this.traininguserName = this.selectUserNameByUserId(res, this.form.variables.yingxiaorenyuan)
          })
          // 请求附件详情
          this.getFileDetail(this.form.variables.fujian)
          this.formUserName = this.form.variables.createUserName
          this.formDeptName = this.form.variables.createDeptName
        } else {
          const currentUser = this.$store.getters.user
          this.formUserName = currentUser.nickName
          this.formDeptName = currentUser.dept.deptName
          this.form.variables.createTime = formatDate(new Date().getTime())

        }
      },
      immediate: true,
    },
    form: {
      handler(val) {
        //是否营销立项
        if (val.variables.shuidian == '0') {
          this.isShowTaxExplain = true
        } else {
          this.isShowTaxExplain = false
        }
      },
      deep: true,
    },

  },
  computed: {
    computeTotalCost: function () {
      let materialCost =
        this.form.variables.cailiaofei == null
          ? 0
          : this.form.variables.cailiaofei
      let constructionCost =
        this.form.variables.shigongfei == null
          ? 0
          : this.form.variables.shigongfei
      let coordinationCost =
        this.form.variables.guanlifei == null
          ? 0
          : this.form.variables.guanlifei
      let otherCost =
        this.form.variables.othercost == null
          ? 0
          : this.form.variables.othercost
      let totalCost = parseFloat(
        materialCost + constructionCost + coordinationCost + otherCost
      ).toFixed(2)
      this.form.variables.zongchengben = totalCost
      return totalCost
    },
    computeGrossProfit: function () {
      let contractMoney =
        this.form.variables.projectAmount == null
          ? 0
          : this.form.variables.projectAmount
      let totalCost =
        this.form.variables.zongchengben == null
          ? 0
          : this.form.variables.zongchengben
      let grossProfit = parseFloat(contractMoney - totalCost).toFixed(2)
      this.form.variables.profit = grossProfit
      return grossProfit
    },
    computeGrossMargin: function () {
      let contractMoney =
        this.form.variables.projectAmount == null
          ? 0
          : this.form.variables.projectAmount
      if (contractMoney == 0) {
        return 0
      } else {
        let grossProfit =
          this.form.variables.profit == null
            ? 0
            : this.form.variables.profit
        let grossMargin = parseFloat((grossProfit / contractMoney) * 100).toFixed(2)
        this.form.variables.estimatedProfitMargin = grossMargin
        return grossMargin
      }
    },
    computeCoordinationCost: function () {
      let contractMoney =
        this.form.variables.projectAmount == null
          ? 0
          : this.form.variables.projectAmount
      let projectType = this.form.variables.projectType1
      let coordinationCost = 0
      if (contractMoney > 400000) {
        coordinationCost = contractMoney * 0.5 / 100
      } else if (200000 <= contractMoney && contractMoney <= 400000) {
        coordinationCost = 2000
      } else {
        coordinationCost = 0
      }
      if (projectType == '1') {
        //通信
        if (coordinationCost > 20000) {
          coordinationCost = 20000
        }
      } else if (projectType == '2') {
        //市政
        if (coordinationCost > 30000) {
          coordinationCost = 30000
        }
      } else if (projectType == '3') {
        //集成
        if (coordinationCost > 25000) {
          coordinationCost = 25000
        }
      }
      this.form.variables.guanlifei = coordinationCost
      return coordinationCost
    },
  },
}
</script>
<style lang="scss" scoped>

.el-tabs--card >::v-deep .el-tabs__header {
  border-bottom: 1px solid #3289d54f;
  .el-tabs__nav{
    border: 0 !important;
    .is-top{
      border: 1px solid #ccc;
      margin-right: 10px;
      border-radius: 10px 10px 0 0;
      height: 35px;
      border-bottom: none;
    }
    .is-active{
      color: white;
      background: #3289d5;
    }
  }
}
.but-form {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container_box {
  margin-top: 20px;
  padding: 0 40px;

}
.top_title{
  font-size: 20px;
  color: #3894ff;
  font-weight: bold;
  margin-bottom: 10px;
}
.zhibiao_box {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;

  .top {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: space-around;

    .a {
      width: 25%;
      height: 100%;
      padding: 10px 15px 5px 15px;
      box-sizing: border-box;
      //border: 2px solid #ccc;
      box-shadow: 1px 1px 5px #ccc;
      .border_btom {
        border-bottom: 1px solid #dddddd;
      }

      .a_top {
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text_x {
          font-size: 14px;
          margin-bottom: 5px;
        }

        .text_b {
          font-weight: bold;
          margin-bottom: 10px;
        }

        .text_t {
          margin: 10px 0 5px 0;
        }

        img {
          width: 40px;
        }
      }
    }

    .b {
      width: 35%;
      height: 100%;
      box-shadow: 1px 1px 5px #ccc;
      padding: 10px 35px 10px 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 65%;
        height: 100%;

        .small {
          text-align: center;
          font-size: 12px;
          width: 100px;
          display: inline-block;
          border: 1px solid #ffb140;
          background: #fffbf3;
          border-radius: 30px;
          padding: 1px 4px;
          box-sizing: border-box;
          margin: 5px 0 15px 0;
        }
        .smalls {

          text-align: center;
          font-size: 12px;
          width: 100px;
          display: inline-block;
          border: 1px solid #4c99ff;
          background: #f0f6ff;
          border-radius: 30px;
          padding: 1px 4px;
          box-sizing: border-box;
          margin: 5px 0 15px 0;
        }

        .colors {
          font-size: 18px;
          color: #f18b20;
          margin-right: 5px;
        }
      }

      .right {
        position: relative;

        .jindu {
          position: absolute;
          top: 35%;
          left: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .box_middle{
    margin-top: 50px;
    padding: 10px;
    box-sizing: border-box;
    .box_middle_title{
      font-size: 20px;
      color: #3894ff;
      font-weight: bold;
    }
    .box_middle_list{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin: 10px 0 0 45px;
     font-size: 14px;
      .bigjindu{
        margin-left: 50px;
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      .list_text{
        margin-left: 15px;
        font-size: 14px;
      }
    }
  }
  .box_bottom{
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .bottom_list{
      width: 33%;
      .bottom_list_title{
        color: black;
        font-weight: bold;
      }
      .bottom_list_zj{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 10px 0 0 15px;
        .bigjindu{
          width: 60%;
          margin-right: 5px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
      p{
        margin-left: 60px;
      }
    }
  }
  .goodslist{
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;
    .daochu{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      box-sizing: border-box;
      .goods_title{
        color: #3894ff;
        font-size: 20px;
        font-weight: bold;

      }
    }

  }
  .fonts {
    font-size: 13px;
    margin-bottom: 5px;
    .zhanbi{
      margin-left: 20px;
    }
  }
  .shuzi{
    font-size: 25px;
  }
  .fontc{
    color: #969696;
  }
  .font-wt {
    font-weight: bold;
  }
}
</style>

